<template>
	<view class="content">
		<view class="headerbgbox">
			<image class="image" :src="proxy.serverimageUrl + 'understand/topbg.png'" mode=""></image>
			<view class="bgbox-content">
				<view class="box-topback" @click="goback">
					<image :src="proxy.serverimageUrl + 'back.png'" mode=""></image>
					<view class="text">
						关于协会
					</view>
				</view>
			</view>
		</view>
		<view class="content-class">
			<image class="icon-circla" :src="proxy.serverimageUrl + 'understand/icon.png'" mode=""></image>
			<view class="headtitle">
				<view class="text-left">
					协会简介
				</view>
				<view class="text-right">
					Introduction
				</view>
			</view>
			<view class="text-content" v-html="introductionobj.introduction">
			
			</view>
			<view class="headtitle" style="margin-top: 120rpx;">
				<view class="text-left">
					协会章程
				</view>
				<view class="text-right">
					Regulations
				</view>
			</view>
			<view class="text-content" style="margin-top: 68rpx;" v-html="introductionobj.constitution">
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
	introduction
	} from '../../utils/api.js'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	onLoad(()=>{
		getintroduction()
		console.log(proxy)
	})
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const introductionobj = ref({})
	const getintroduction = () =>{
		introduction().then(res=>{
			introductionobj.value = res.data[0]
		})
	}
	const goback = () =>{
		uni.switchTab({
			url:'/pages/Home/index'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;

		.headerbgbox {
			position: relative;
			width: 100vw;
			height: 506rpx;
			padding: 114rpx 40rpx 0;

			.image {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 1;
			}

			.bgbox-content {
				position: relative;
				z-index: 10;

				.box-topback {
					display: flex;
					align-items: center;

					image {
						width: 18rpx;
						height: 34rpx;
					}

					.text {
						margin-left: 19rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.content-class {
			position: relative;
			top: -150rpx;
			z-index: 12;
			background: #FFFFFF;
			border-radius: 120rpx 0px 0px 0px;
			padding: 94rpx 40rpx 0;

			.icon-circla {
				position: absolute;
				right: 87rpx;
				top: -60rpx;
				width: 142rpx;
				height: 120rpx;
			}

			.headtitle {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.text-left {
					font-family: Alibaba PuHuiTi;
					font-weight: bold;
					font-size: 36rpx;
					color: #111111;
					position: relative;
					margin-left: 33rpx;
				}

				.text-left::before {
					content: '';
					width: 11rpx;
					height: 42rpx;
					background: #2854B7;
					border-radius: 6rpx;
					position: absolute;
					left: -12rpx;
					top: 14%;
					// transform: translateX(-50%);
				}

				.text-right {
					font-family: Alibaba PuHuiTi;
					font-weight: 300;
					font-size: 24rpx;
					color: #848484;
				}
			}

			.headtitle::after {
				content: '';
				position: absolute;
				top: 80rpx;
				left: 0;
				width: 669rpx;
				height: 1rpx;
				background: #DCDCDC;
			}

			.text-content {
				margin-top: 80rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 26rpx;
				color: #303030;
			
			}
		}
	}
</style>